

/* ASIDE */
/* ===================================== */
#container {
				#aside-container{
								padding:0 20px;
								position: relative;
								top: 0;
								z-index: 3;
								.nano-content{
												position: static;
												outline: none
								}
				}
				#aside {
								.list-link li a:not(.btn){
												color: darken(@aside-dark-color,18%);
												&:hover{
																color: @aside-dark-color;
												}
								}
								.badge-stat{
												color: @aside-dark-bg
								}
								.text-main{
												color: @aside-dark-color;
								}
				}
				&.aside-float.aside-in #aside-container{
								box-shadow: 0 0 5px 6px rgba(0,0,0,.15)
				}
}

#aside{
				background-color: @aside-dark-bg;
				color: @aside-dark-color;
				overflow: hidden;
				-webkit-transform-style: preserve-3d;
				-webkit-backface-visibility: hidden;
				-webkit-perspective: 1000;
				-webkit-transform : translateZ(0);
				a:not(.btn):not(.btn-link){
								color: inherit;
				}
				&.aside-xs-in{
								max-height: none;
								overflow: hidden;
								margin-bottom: 70px;
				}
				.bord-all,
				.bord-top,
				.bord-btm,
				.bord-left,
				.bord-rgt,
				.bord-hor,
				.bord-ver,
				.list-divider{
								border-color:lighten(@aside-dark-bg,3%);
				}
				.btn-link{
								color: @aside-dark-color;
				}
				.text-muted{
								color: lighten(@aside-dark-bg,35%);
				}
				hr{
								border-color: rgba(0,0,0,0.15)
				}
}


& when (@aside-tabs){

				/* Aside with tabs */
				/* ===================================== */
				#aside{
								#aside-container &{
												.nav-tabs{
																&.nav-justified > li{
																				display: table-cell;
																				width: 1%
																}
																li{
																				border-bottom: 1px solid darken(@aside-dark-bg, 5%);
																				> a{
																								border-radius: 0;
																								border: 0;
																								background-color: @aside-dark-bg;
																								padding : .9em 0;
																								margin: 0;
																								> i{
																												font-size: 1.35em;
																												vertical-align : sub
																								}
																								&:before{
																												content: '';
																												display: block;
																												background: @state-active-bg;
																												height: 2px;
																												position: absolute;
																												bottom: -1px;
																												left: 50%;
																												right: 50%;
																												transition: left .05s, right .05s
																								}
																				}
																				&:first-child > a{
																								border-left: 0;
																				}
																				&:last-child > a{
																								border-right: 0;
																				}
																				&:not(.active) a{
																								opacity: .5;
																				}
																}
																.active{
																				a:before{
																								content: '';
																								display: block;
																								background: @state-active-bg;;
																								height: 2px;
																								position: absolute;
																								bottom: -1px;
																								left: 0;
																								right: 0;
																								transition: left .15s, right .15s
																				}
																}
												}
												.tab-content{
																padding: 5px 0;
												}
								}
								#container.aside-bright &{
												.nav-tabs {
																li{
																				border-bottom: 1px solid darken(@aside-bright-bg, 5%);
																				> a{
																								background-color: @aside-bright-bg
																				}
																}
												}
								}
				}
}



/* ASIDE - RESPONSIVE LAYOUT */
/* ===================================== */
@media (max-width: 760px){
				#container > div > #aside-container{
								top : @navbar-height
				}
				#container.aside-left.aside-in #aside-container{
								left: 0;
								right: auto;
				}
				#container.aside-left{
								#aside-container{
												left: 0 - @aside-width;
												right: auto;
								}
				}
				#container.aside-left.mainnav-sm #content-container,
				#container.aside-left.mainnav-sm #footer {
								padding-left: 0
				}
}

@media (min-width: 768px){
				#container.mainnav-sm.aside-left.aside-in{
								#aside-container{
												left: @mainnav-sm-width;
												right:auto
								}
								#content-container, #footer{
												padding-left: @mainnav-lg-width;
								}
				}
				div#container.mainnav-lg.aside-left.aside-in{
								#content-container, #footer{
												padding-left: @mainnav-lg-width;
												text-align: left
								}
				}
}




#aside{
				padding-top: @navbar-height;
				visibility: visible;
				background-color: @aside-dark-bg;
				height: 100%
}

#container{
				#aside-container{
								padding: 0;
								position: absolute;
								width: @aside-width;
								height: auto;
								left: auto;
								right: -@aside-width;
								top:0;
								bottom: 0;
								min-height: 100vh;
								overflow: hidden;
								z-index: 3;
								.nano-content{
												position: absolute
								}
				}
				#content-container, #footer{
								padding-right: 0
				}
				&.mainnav-in{
								&:not(.slide) #footer, & #content-container{
												padding-right: 0
								}
				}
}


@media (min-width: 1024px){
				#container.aside-in{
								#aside{
												padding-top: @navbar-height;
								}
								&:not(.aside-float) #content-container{
												padding-right: @aside-width;
								}
								&.aside-left{
												&:not(.aside-float) #content-container, &:not(.aside-float) #footer{
																padding-left: @aside-width;
																padding-right: 0;
												}
								}
								&:not(.aside-float) #content-container, &:not(.aside-float) #footer{
												padding-right: @aside-width;
								}
								&.aside-left{
												&:not(.aside-float) #content-container, &:not(.aside-float) #footer{
																padding-left: @aside-width;
																padding-right: 0;
												}
												&.mainnav-lg{
																&:not(.aside-float) #content-container, &:not(.aside-float) #footer{
																				padding-left: @mainnav-lg-width+@aside-width;
																				padding-right: 0
																}
																#aside-container{
																				left: @mainnav-lg-width;
																				right: auto
																}
												}
												&.mainnav-sm{
																&:not(.aside-float) #content-container, &:not(.aside-float) #footer{
																				padding-left: @mainnav-sm-width+@aside-width;
																				padding-right: 0
																}
																#aside-container{
																				left: @mainnav-sm-width;
																				right:auto;
																}
												}
												&.mainnav-in{
																#aside-container{
																				left: @mainnav-lg-width;
																				right:auto;
																}
												}

								}
				}
}



/* ASIDE - TOGGLE HIDE/SHOW */
/* ===================================== */

#container{
				&.aside-in {
								#aside-container{
												left: auto;
												right: 0;
								}
								&.aside-left{
												&.mainnav-in{
																#aside-container{
																				left: @mainnav-lg-width;
																				right: auto;
																}
												}
								}

				}
}



@media (min-width: 768px){
				#container{
								&.aside-left #aside-container,
								&.aside-in.aside-left #aside-container{
												left: 0;
												right: auto
								}
								&.aside-left{
												&.mainnav-sm{
																#aside-container{
																				left:(0 - @aside-width) + @mainnav-sm-width;
																}
																&:not(.aside-float) #content-container, &:not(.aside-float) #footer{
																				padding-left:@mainnav-sm-width
																}
												}
												&.mainnav-out{
																&:not(.aside-in) #aside-container{
																				left: -@mainnav-lg-width;
																}
												}
								}
				}
}

/* ASIDE - FIXED POSITION */
/* ===================================== */
#container{
				&.aside-fixed{
								#aside-container{
												position: fixed;
								}
								#aside{
												height: 100%;
												.nano-content{
																position: absolute;
												}
								}
								&:not(.navbar-fixed){
												#aside-container.affix{
																top: 0 - @navbar-height;
																position: fixed;
																&-top{
																				top: 0;
																				position: absolute
																}
												}
								}

				}
}




/* ASIDE : BRIGHT COLOR THEMES */
/* ===================================== */
#container{
				&.aside-bright{
								#aside{
												background-color: @aside-bright-bg;
												border: 1px solid darken(@body-bg, 5%);
												color: @aside-bright-color;
												& when (lightness(@mainnav-bg) >= 70%){
																border: 1px solid darken(@body-bg, 5%);
												}
												& when (lightness(@body-bg) >= 95%){
																border: 1px solid darken(@body-bg, 5%);
												}
												.badge-stat{
																color: @aside-bright-bg
												}
												.text-main{
																color: @body-main-color
												}
												.text-light{
																color : @body-color;
												}
												hr{
																border-color: @border-color-base
												}
												.bord-all,
												.bord-top,
												.bord-btm,
												.bord-lft,
												.bord-rgt,
												.bord-hor,
												.bord-ver,
												.list-divider{
																border-color: darken(@body-bg, 7.5%);
												}
												.text-muted{
																color : @text-muted;
												}
												.progress{
																background-color: darken(@aside-bright-bg, 10%);
												}
												.list-link li a:not(.btn){
																color: lighten(@aside-bright-color,5%);
																&:hover{
																				color: @aside-bright-color
																}
												}
												a:not(.btn){
																color: @aside-bright-color;
																&:hover, &:focus{
																				color: darken(@aside-bright-color,10%);
																}
												}
												.btn-link{
																color: @aside-bright-color;
												}
								}

				}

}


